<template>
  <div class="createTopic">
    <head-Menu></head-Menu>
    <div class="REContainer">
      <h1>创建试题</h1>
      <el-form ref="form" :model="createTopicForm" label-width="80px" style="width:520px;margin:0 auto;text-align:left;max-height: 470px;overflow-y: auto">
        <el-form-item label="课 目">
          <el-radio-group v-model="createTopicForm.subject">
            <el-radio-button label="语文" ></el-radio-button>
            <el-radio-button label="数学" ></el-radio-button>
            <el-radio-button label="英语" ></el-radio-button>
            <div style="margin-top:10px" >
              <el-radio-button label="物理" ></el-radio-button>
              <el-radio-button label="化学" ></el-radio-button>
              <el-radio-button label="生物" ></el-radio-button>
              <el-radio-button label="政治" ></el-radio-button>
              <el-radio-button label="历史" ></el-radio-button>
              <el-radio-button label="地理" ></el-radio-button>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select style="width:200px" v-model="createTopicForm.topicType" placeholder="请选择题目类型" @change="notSingle">
            <el-option label="单选题" value="单选题"></el-option>
            <el-option label="判断题" value="判断题"></el-option>
            <el-option label="填空题" value="填空题"></el-option>
            <el-option label="综合题" value="综合题"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题 干" style="width:500px">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 30}" placeholder="请输入内容" v-model="createTopicForm.stem"></el-input>
        </el-form-item>
        <el-form-item v-if="createTopicForm.topicType == '单选题'" label="选 项" style="width:450px">
          <el-input placeholder="请输入内容" v-model="createTopicForm.A">
            <template slot="prepend">A</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="createTopicForm.B">
            <template slot="prepend">B</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="createTopicForm.C">
            <template slot="prepend">C</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="createTopicForm.D">
            <template slot="prepend">D</template>
          </el-input>
        </el-form-item>
        <el-form-item label="答 案" style="width:400px">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请输入内容" v-model="createTopicForm.answer"></el-input>
        </el-form-item>
        <el-form-item label="解 析" style="width:500px">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 30}" placeholder="请输入内容" v-model="createTopicForm.analysis"></el-input>
        </el-form-item>
        <el-form-item label="考察点" style="width:450px">
          <el-input v-model="createTopicForm.knowledgePoints" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>  
      <el-button type="primary" @click="createTopic" style="margin:10px 0;">立即创建</el-button>
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { createTopic } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      createTopicForm: {
        topicType: '',
        subject: '',
        stem: '',
        answer: '',
        analysis: '',
        knowledgePoints: '',
        A: '',
        B: '',
        C: '',
        D: '',
      },
    }
  },
  components: {
    headMenu
  },
  created() {

  },
  methods: {
    async createTopic() {
      console.log(this.createTopicForm);
      await createTopic(this.createTopicForm)
        .then((res) => {
          Toast(res.msg)
        })
    },
    notSingle() {
      if (this.createTopicForm.topicType != '单选题') {
        this.createTopicForm.A = ''
        this.createTopicForm.B = ''
        this.createTopicForm.C = ''
        this.createTopicForm.D = ''
      }
    }
  }
}
</script>

<style lang='stylus'>
.createTopic
  color black
  flex 1 1 100%
  display block
  .REContainer
    margin 0 10px
    border 1px solid #CCCCCC
    text-align center

</style>